<template>
    <div class="photoinfo-box">
        <h3 class="phinfo-title">{{ photoinfoObj.title }}</h3>
        <div class="phinfo-subtitle">
            <span>发表时间：{{ photoinfoObj.add_time | dataFormat}}</span>
            <span>点击次数：{{ photoinfoObj.click }}</span>
        </div>

        <!--缩略图区域-->
        <vue-preview :slides="slide" @close="handleClose"></vue-preview>

        <!--内容区域-->
        <div class="phinfo-content" v-html="photoinfoObj.content"></div>

        <!--评论区域-->
        <component-box :id="id"></component-box>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    import comment from '@/components/comment/comment'


    export default {
        name: "PhotoInfo",
        data(){
            return {
                id: this.$route.params.id,
                photoinfoObj: {},
                slide: [
                    // {
                    //     src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
                    //     msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
                    //     alt: 'picture1',
                    //     title: 'Image Caption 1',
                    //     w: 600,
                    //     h: 400
                    // },
                    // {
                    //     src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
                    //     msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
                    //     alt: 'picture2',
                    //     title: 'Image Caption 2',
                    //     w: 1200,
                    //     h: 900
                    // }
                ]
            }
        },
        created() {
            this.getPhotoInfo();
            this.getThumbs();
        },
        methods:{
            getPhotoInfo(){
                this.$axios.get('/api/getimageInfo/'+ this.id).then(res =>{
                    if( res.data.status === 0 ){
                        this.photoinfoObj = res.data.message[0];
                    }else{
                        Toast("请求失败！")
                    }
                })
            },
            getThumbs(){
                this.$axios.get('/api/getthumimages/'+ this.id).then(res =>{
                    if( res.data.status === 0 ){

                        res.data.message.forEach(item=>{
                            item.msrc = item.src;
                            item.alt = '缩略图';
                            item.title = 'Image Caption';
                            item.w = 300;
                            item.h = 300;
                        });

                        this.slide = res.data.message;
                    }else{
                        Toast("请求失败！")
                    }
                })
            },
            handleClose () {
                console.log('close event')
            }
        },
        components:{
            'component-box': comment
        }
    }
</script>

<style lang="scss" scoped>

</style>
